<template>
  <div class="flex flex-1 w-full" ref="tableBoxRef">
    <div class="flex flex-col flex-1 w-0">
      <el-table ref="tableRef" class="flex-1" :height="tableBoxHeight" :data="data"
        :highlight-current-row="highlightCurrentRow" header-row-class-name="table-header"
        header-cell-class-name="table-header-cell" cell-class-name="table-cell" :row-class-name="tableRowClassName"
        :row-key="rowKey" :default-expand-all="expandShow" @row-click="handleSelectRow"
        @selection-change="handleSelectionChange" @select="handleSelect" @expand-change="handleExpandChange"
        :row-style="rowStyle" @select-all="handleSelectAll" @sort-change="sortChange">
        <slot></slot>
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
      <el-pagination v-if="!hidePagination" class="self-end mr-8 mt-[10px]" :page-sizes="pageSizes" :page-size="pageSize"
        layout="total, sizes,prev, pager, next, jumper" :total="total" v-model:current-page="currentPage"
        @current-change="handlePageChange" @size-change="handleSizeChange" :disabled="pageDisabled" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const tableRef = ref()
const tableBoxRef = ref()
const tableBoxHeight = ref()
onMounted(() => {
  tableBoxHeight.value =
    tableBoxRef.value.getBoundingClientRect().height -
    (!props.hidePagination ? 30 : 0)
})
const emits = defineEmits<{
  (e: 'handleSelectRow', row: any): void
  (e: 'currentPage', current: number): void
  (e: 'selectionChange', selection: any): void
  (e: 'handleTableSelect', selection: any, row: any): void
  (e: 'select', params: any): void
  (e: 'sortChange', params: any): void
  (e: 'expandChange', row: any): void
  (e: 'handleSelectAll', selection: any): void
  (e: 'pageSize', items: number): void
}>()
const currentPage = defineModel('currentPage', { default: 1 })
const pageSize = defineModel('pageSize', { default: 10 })
const props = withDefaults(
  defineProps<{
    data: object[]
    total?: number
    highlightCurrentRow?: boolean
    rowStyle?: any
    rowKey?: string
    hidePagination?: boolean
    expandShow?: boolean
    pageDisabled?: boolean
    showEmptyImg?: boolean
    pageSizes?: number[]
  }>(),
  {
    data: () => [],
    total: 0,
    highlightCurrentRow: false,
    rowStyle: () => ({}),
    rowKey: 'id',
    hidePagination: false,
    expandShow: false,
    pageDisabled: false,
    showEmptyImg: true,
    pageSizes: () => [10, 20, 30, 50, 70, 90]
  }
)
const handleSelectRow = (row: any) => {
  emits('handleSelectRow', row)
}
const handlePageChange = (current: number) => {
  currentPage.value = current
  emits('currentPage', current)
}
const handleSizeChange = (items: number) => {
  pageSize.value = items
  emits('pageSize', items)
}
const handleSelectionChange = (selection: any) => {
  emits('selectionChange', selection)
}

// const handleSelect = (selection: any, row: any) => {
//   emits('handleTableSelect', selection, row)
// }

const handleSelectAll = (selection: any) => {
  emits('handleSelectAll', selection)
}

const handleSelect = (arr: any, value: any) => {
  const params = { arr, value }
  emits('select', params)
}

const sortChange = (arr: any, value: any) => {
  const params = { arr, value }
  emits('sortChange', params)
}

const handleExpandChange = (row: any) => {
  emits('expandChange', row)
}
// 给超管高亮显示
const tableRowClassName = ({ row }: any) => {
  if (row.admin === 1) {
    return 'color-row'
  }
  return ''
}

// 控制多选按钮选择状态
const toggleRowSelection = (row: any, status: boolean = true) => {
  tableRef.value!.toggleRowSelection(row, status)
}

// 控制多选按钮选择状态
const toggleAllSelection = () => {
  tableRef.value!.toggleAllSelection()
}
// 清空按钮选项
const clearSelection = () => {
  tableRef.value!.clearSelection()
}
const getSelectionRows = () => {
  return tableRef.value!.getSelectionRows()
}
const clearSort = () => {
  return tableRef.value!.clearSort()
}
defineExpose({
  toggleRowSelection,
  clearSelection,
  tableRef,
  getSelectionRows,
  clearSort,
  toggleAllSelection
})
</script>

<style scoped lang="scss">
::v-deep(.table-header) {
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

::v-deep(.table-header-cell) {
  background-color: rgba(245, 247, 250, 1) !important;
  text-align: center;
}

::v-deep(.table-cell) {
  text-align: center;
}

::v-deep(.el-table .color-row) {
  background-color: #fdefe5;
}

:deep(.el-table__empty-block) {
  position: absolute !important;
}

.table-empty-style {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  /* 修改文本颜色 */
  margin-top: -10%;

  span {
    line-height: 14px;
    font-size: 14px;
  }
}
</style>
